<template>
  <div id="app" :class="{ 'light': isLightMode, 'dark': !isLightMode }">
    <div id="top-bg"></div>

    <div id="bg-dark-overlay"></div>

    <div id="nav-bar" :class="{ 'sticky': isSticky }">
      <span id="nav-logo-container">
        <span id="nav-logo-main"></span>
        <span id="nav-logo-text"></span>
      </span>

      <div id="nav-link-container" role="navigation">
        <a class="nav-link" @click.prevent="scrollTo('blank')">首页</a>
        <a class="nav-link" @click.prevent="scrollTo('about')">关于</a>
        <a class="nav-link" @click.prevent="scrollTo('work')">作品</a>
        <a class="nav-link" @click.prevent="scrollTo('journey')">日志</a>
        <a class="nav-link" id="nav-link-switch-theme" role="button" title="主题：浅色" @click="toggleTheme">
          <i id="icon-theme">&#xe939;</i>
        </a>
      </div>
      <span class="btn-menu" id="btn-menu-1"></span>
    </div>

    <div class="overlay" id="nav-menu-overlay"></div>

    <div id="nav-menu">
      <span class="btn-menu" id="btn-menu-2"></span>
      <a class="nav-link" data-target="top-bg">首页</a>
      <a class="nav-link" data-target="about">关于</a>
      <a class="nav-link" data-target="work">作品</a>
      <a class="nav-link" data-target="journey">日志</a>
      <span class="dividing-line"></span>
      <a class="nav-link" id="nav-menu-link-switch-theme" role="button">主题<span
          id="nav-link-text-current-theme">浅色</span></a>
    </div>

    <div id="headline-container">
      <h1>宁静致远.</h1><span class="heading-underline"></span>
      <h2><span>/*</span> 这里是梓烜的个人主页 <span>*/</span></h2>
    </div>

    <div id="scroll-down-wrapper">
      <span id="scroll-down-icon" role="button" title="深入了解" @click.prevent="scrollTo('about')"></span>
    </div>

    <div id="blank"></div>



    <div id="about">
      <h3>关于我</h3>
      <span class="heading-underline-1"></span>
      <div class="tags-container">
        <span>00后</span>
        <span>GXU</span>
        <span>美食控</span>
        <span>计算机科学与技术</span>
        <span>游戏爱好者</span>
        <span>独立开发者</span>
      </div>
      <div class="about-content">
        <p>我是梓烜</p>
        <p>一名旅行爱好者、白日梦想家，</p>
        <!-- <p>某知名视频站的不知名 <a class="link" target="_blank">UP 主</a></p>
        <p><a class="link" target="_blank">热铁盒软件</a>联合创始人</p> -->
        <p>就读于广西大学计算机科学与技术专业，</p>
        <p>我对技术和创新充满热情：</p>
        <p>喜欢<a class="link" target="_blank">游戏设计</a>、<a class="link" target="_blank">后端开发</a>、机器人编程开发、前端开发...</p>
        <p>我的梦想是通过旅行和摄影，</p>
        <p>探索不同文化的交汇点，</p>
        <p>记录和分享世界的美好，</p>
        <p>保持对这个世界的热爱。</p>
        <p>请多指教！</p>
      </div>
    </div>

    <div id="work">
      <h3>我的作品</h3><span class="heading-underline-1"></span>
      <div class="work-list"><a href="#/blog" target="_self" class="work-link"
          id="work-link-blog">
          <div class="work-link-image"></div>
          <div class="work-link-text-container">
            <p class="work-link-title">哞哞校园</p>
            <p class="work-link-description">一个记录大学生活的BLOG</p>
            <p class="work-link-category">全平台 线上应用</p>
          </div>
        </a><a href="#/my/schoolbus" target="_self" class="work-link" id="work-link-bus">
          <div class="work-link-image"></div>
          <div class="work-link-text-container">
            <p class="work-link-title">哞哞校车</p>
            <p class="work-link-description">校园舒适而生</p>
            <p class="work-link-category">全平台 线上测试</p>
          </div>
        </a><a href="https://www.bilibili.com/video/BV1K64y1j7yM" target="_blank" class="work-link" id="work-link-bilibili">
          <div class="work-link-image"></div>
          <div class="work-link-text-container">
            <p class="work-link-title">颠倒</p>
            <p class="work-link-description">个人制作的游戏作品</p>
            <p class="work-link-category">Windows 游戏</p>
          </div>
<!--       </a><a href="./yxh/" target="_blank" class="work-link" id="work-link-bullshit-generator">
          <div class="work-link-image"></div>
          <div class="work-link-text-container">
            <p class="work-link-title">营销号文案生成器</p>
            <p class="work-link-description">一键创作深度好文</p>
            <p class="work-link-category">全平台 线上应用</p>
          </div> -->
<!--       </a><a href="https://dunight.cn/" target="_blank" class="work-link" id="work-link-dunight">
          <div class="work-link-image"></div>
          <div class="work-link-text-container">
            <p class="work-link-title">度夜</p>
            <p class="work-link-description">精心设计的百度深色主题插件</p>
            <p class="work-link-category">Chromium 浏览器扩展</p>
          </div> -->
<!--       </a><a href="https://ncov19.cn/" target="_blank" class="work-link" id="work-link-ncov19">
          <div class="work-link-image"></div>
          <div class="work-link-text-container">
            <p class="work-link-title">新冠肺炎逝者名录</p>
            <p class="work-link-description">我们不会忘记。</p>
            <p class="work-link-category">全平台 线上应用</p>
          </div> -->
<!--       </a><a href="https://space.bilibili.com/318451757" target="_blank" class="work-link" id="work-link-bilibili">
          <div class="work-link-image"></div>
          <div class="work-link-text-container">
            <p class="work-link-title">我的视频作品</p>
            <p class="work-link-description">在线观看我的原创视频作品</p>
            <p class="work-link-category">bilibili 自媒体</p>
          </div> -->
<!--       </a><a class="work-link" id="work-link-others">
          <div class="work-link-image"></div>
          <div class="work-link-text-container">
            <p class="work-link-title">我的其他作品</p>
            <p class="work-link-description">一些早期 / 开发中 / 实验性的作品</p>
            <p class="work-link-category">点击查看更多</p>
          </div> -->
        </a>
      </div>
    </div>


    <div id="journey">
      <h3>大学日志</h3><span class="heading-underline-1"></span>
      <p class="tip">左右滑动来查看</p>
      <div class="journey-container-wrapper">
        <div id="journey-container">
          <div>
            <p class="journey-item-date">2022-7</p>
            <p class="journey-item-content">广西大学优秀学生会骨干</p>
          </div>
          <div>
            <p class="journey-item-date">2023-5-17</p>
            <p class="journey-item-content">大佬带我勇夺院足球比赛季军</p>
          </div>
          <div>
            <p class="journey-item-date">2023-7-20</p>
            <p class="journey-item-content">全国大学生机器人大赛ROBOCON</p>
            <p class="journey-item-content">全国三等奖</p>
            <p class="journey-item-content">前往江苏江阴</p>
          </div>
          <div>
            <p class="journey-item-date">2023-8-1</p>
            <p class="journey-item-content">中国大学生电子设计大赛</p>
            <p class="journey-item-content">省级一等奖</p>
            <p class="journey-item-content">前往广西桂林</p>
          </div>
          <div>
            <p class="journey-item-date">2023-10-11</p>
            <p class="journey-item-content">机核网2023BOOOM游戏创作挑战</p>
          </div>
          <div>
            <p class="journey-item-date">2023-11-21</p>
            <p class="journey-item-content">院篮球赛八强</p>
          </div>
          <div>
            <p class="journey-item-date">2023-12-1</p>
            <p class="journey-item-content">中国大学生农业机器人大赛</p>
            <p class="journey-item-content">国家三等奖</p>
            <p class="journey-item-content">前往湖北武汉</p>
          </div>
          <div>
            <p class="journey-item-date">2024-12-20</p>
            <p class="journey-item-content">全国大学生机器人科技创新交流营暨大赛</p>
            <p class="journey-item-content">全国三等奖</p>
            <p class="journey-item-content">前往山东日照</p>
          </div>
          <div>
            <p class="journey-item-date">2024-5</p>
            <p class="journey-item-content">大学生智能农业装备大赛</p>
            <p class="journey-item-content">全国二等奖</p>
            <p class="journey-item-content">前往新疆石河子</p>
          </div>
          <div>
            <p class="journey-item-fade-out">2024</p>
            <p class="journey-item-fade-out">未完待续...</p>
          </div>
        </div><span class="journey-mask left"></span> <span class="journey-mask right"></span>
      </div>
    </div>

    <div class="footer">
      <!--      <div>
        <p>友情链接</p>
        <a href="https://chper.cn" target="_blank">鹏鹏</a><br>
      </div> -->
      <div>
        <p>与我联系</p>
        <a href="https://gitee.com/XuanxBaby" target="_blank">我的Gitee</a><br>
        <!-- <a href="https://weibo.com/FXHighway" target="_blank">我的邮箱</a><br> -->
        <a href="https://space.bilibili.com/318451757" target="_blank">我的 bilibili 频道</a><br>
      </div>

      <div id="copyright">
        <p>&copy; 2024 梓烜</p>
        <span class="legal-text-container">
          <a id="link-copyright">版权声明</a><br>
          <a href="Https://beian.miit.gov.cn" target="_blank">桂ICP备2024037371号</a><br>
          <!-- <a href="" target="_blank">备</a> -->
        </span>
      </div>
    </div>
  </div>


</template>

<script>
  export default {
    name: 'live-movie',
    data() {
      return {
        isLightMode: true,
        isSticky: false,
      };
    },
    methods: {
      scrollTo(targetId) {
        const targetElement = document.getElementById(targetId);
        if (targetElement) {
          targetElement.scrollIntoView({
            behavior: 'smooth'
          });
        }
      },
      toggleTheme() {
        // 切换主题的逻辑可以在这里实现
        this.isLightMode = !this.isLightMode;
        console.log('切换主题');
      },
      handleScroll() {
        const aboutSection = document.getElementById('about');
        if (aboutSection) {
          const rect = aboutSection.getBoundingClientRect();
          this.isSticky = rect.top <= 30;
        }
      },
    },
    created() {
      document.title = '生活大小事'; // 手动设置网页标题
    },
    mounted() {
      // 在组件挂载后，添加.loaded类来触发背景的加载效果
      const topBg = document.querySelector('#top-bg');
      if (topBg) {
        setTimeout(() => {
          topBg.classList.add('loaded');
        }, 50); // 2000 毫秒后执行
      };
      window.addEventListener('scroll', this.handleScroll);
      this.handleScroll(); // 初始调用以设置初始状态
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.handleScroll);
    },
  }
</script>

<style scoped>
  @import './my.css';
</style>
